<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Grid Compound Columns</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../../dojo/resources/dojo.css";
			@import "../../css/skins/claro.css";
			.dgrid {
				margin: 10px;
				width: 80%;
			}
			
			.field-col1 {
				width: 20%;
			}
			.field-col2 {
				width: 20%;
			}
			.field-col3 {
				width: auto;
			}
			.field-col4 {
				width: 16%;
			}
			.field-col5 {
				width: 50px;
			}

			#gridcscc {
				width: 800px;
			}

			#gridcscc .field-col1,
			#gridcscc .field-col2,
			#gridcscc .field-col3,
			#gridcscc .field-col4,
			#gridcscc .field-col5 {
				width: 300px;
			}

			.dgrid-column-set-0 {
				width: 50%;
			}
			
			#gridcscc .dgrid-header .dgrid-row-table {
				height: 45px; /* For IE */
			}
		</style>
		<script src="../../../dojo/dojo.js" data-dojo-config="async: true"></script>
		<script>
			require(["dgrid/OnDemandGrid", "dgrid/extensions/CompoundColumns",
				"dgrid/ColumnSet", "dgrid/Selection", "dgrid/Keyboard",
				"dgrid/extensions/ColumnResizer", "dgrid/extensions/ColumnHider",
				"dojo/_base/declare", "dojo/_base/lang", "dojo/on",
				"dgrid/test/data/base", "dojo/domReady!"],
				function(Grid, CompoundColumns, ColumnSet, Selection, Keyboard, ColumnResizer, ColumnHider,
						declare, lang, on, testStore){

					function byId(id){
						return document.getElementById(id);
					}
					
					function getColumns(){
						return [
							{ field: 'col1', label: 'First Column' },
							{ label: "Full Name", children: [
								{ label: 'Given', children: [
									{ field: 'col2', label: 'First' },
									{ field: 'col5', label: 'Middle', sortable: false }
								] },
								{ field: 'col3', label: 'Last' }
							] },
							{ label: "No Sub-Headers", className: "noSub", showChildHeaders: false, children: [
								{ field: 'col4' },
								{ field: 'col5', formatter: function(data){ return Math.round(data); } }
							] },
							{ field:'col1', label: 'Last Column' }
						];
					}
					
					function getHiddenColumns() {
						var columns = getColumns();
						// Hide some columns to test that the parent span update
						// logic still executes correctly
						columns[1].children[0].children[1].hidden = true;
						columns[2].children[1].hidden = true;
						return columns;
					}
					
					function getColumnSets(set){
						if(set === 2){
							return [
								[
									[
										{ label: 'Column 1', field: 'col1' },
										{ label: 'Column 3', field: 'col3' }
									]
								],
								[
									[
										{
											label: "Columns 4 and 5",
											children: [
												{ label: 'Column 4', field: 'col4' },
												{ label: 'Column 5', field: 'col5' }
											]
										}
									]
								]
							];
						}else if(set === 3){
							return [
								[
									[
										{
											label: 'Columns 1 and 2',
											children:
													[
														{ label: 'Column 1', field: 'col1' },
														{ label: 'Column 2', field: 'col2', sortable: false }
													]
										}
									]
								],
								[
									[
										{
											label: "Columns 3 and 4",
											children: [
												{ label: 'Column 3', field: 'col3' },
												{ label: 'Column 4', field: 'col4' }
											]
										}
									]
								],
								[
									[
										{
											label: "Columns 4 and 5",
											children: [
												{ label: 'Column 4', field: 'col4' },
												{ label: 'Column 5', field: 'col5' }
											]
										}
									]
								]
							];
						}else if(set === 4){
							return [
								[
									[
										{
											label: 'Columns 1 and 2',
											children:
													[
														{ label: 'Column 1', field: 'col1' },
														{ label: 'Column 2', field: 'col2', sortable: false }
													]
										}
									]
								],
								[
									[
										{
											label: "Columns 4 & 5, 3, 4, 4 & 5",
											children: [
												{
													label: "Columns 4 and 5",
													children: [
														{ label: 'Column 4', field: 'col4' },
														{ label: 'Column 5', field: 'col5' }
													]
												},
												{ label: 'Column 3', field: 'col3' },
												{ label: 'Column 4', field: 'col4' },
												{
													label: "Columns 4 and 5",
													children: [
														{ label: 'Column 4', field: 'col4' },
														{ label: 'Column 5', field: 'col5' }
													]
												}
											]
										}
									]
								]
							];
						}else{
							// Set 1 / default
							return [
								[
									[
										{
											label: 'Columns 1 and 2',
											children:
													[
														{ label: 'Column 1', field: 'col1' },
														{ label: 'Column 2', field: 'col2', sortable: false }
													]
										},
										{ label: 'Column 4', field: 'col4' }
									]
								],
								[
									[
										{ label: 'Column 1', field: 'col1' },
										{ label: 'Column 4', field: 'col4' }
									]
								]
							];
						}
					}
					
					function getHiddenColumnSets(){
						// Variant of getColumnSets(4)
						return [
							[
								[
									{
										label: 'Columns 1 and 2',
										children:
												[
													{ label: 'Column 1', field: 'col1' },
													{ label: 'Column 2', field: 'col2', sortable: false, hidden: true }
												]
									}
								]
							],
							[
								[
									{
										label: "Columns 4 & 5, 3, 4, 4 & 5",
										children: [
											{
												label: "Columns 4 and 5",
												children: [
													{ label: 'Column 4', field: 'col4', hidden: true },
													{ label: 'Column 5', field: 'col5', hidden: true }
												]
											},
											{ label: 'Column 3', field: 'col3', hidden: true },
											{ label: 'Column 4', field: 'col4' },
											{
												label: "Columns 4 and 5",
												children: [
													{ label: 'Column 4', field: 'col4' },
													{ label: 'Column 5', field: 'col5', hidden: true }
												]
											}
										]
									}
								]
							]
						];
					}

					window.grid = new (declare([Grid, Selection, Keyboard, CompoundColumns]))({
						sort: "id",
						store: testStore,
						columns: getColumns()
					}, "grid");

					window.gridcscc = new (declare([Grid, CompoundColumns, ColumnSet, Selection, Keyboard]))({
						sort: "id",
						store: testStore,
						columnSets: getColumnSets(1)
					}, "gridcscc");
					
					on(byId("btnCsccColumnSets1"), "click", function(){
						gridcscc.set("columnSets", getColumnSets(1));
					});
					on(byId("btnCsccColumnSets2"), "click", function(){
						gridcscc.set("columnSets", getColumnSets(2));
					});
					on(byId("btnCsccColumnSets3"), "click", function(){
						gridcscc.set("columnSets", getColumnSets(3));
					});
					on(byId("btnCsccColumnSets4"), "click", function(){
						gridcscc.set("columnSets", getColumnSets(4));
					});
					
					
					var form = byId("formCombined"),
						gridCombined,
						hasCombinedColumnSets;
					function createCombinedGrid(event){
						var mixins = [Grid],
							args = {
								sort: "id",
								store: testStore
							};
						
						hasCombinedColumnSets = form.elements.set.checked;
						
						if(event){
							event.preventDefault();
						}
						
						// Note that order of mixins is important with CompoundColumns,
						// since it extends ColumnHider and ColumnResizer methods,
						// but needs to be extended by ColumnSet for structure.
						
						if(form.elements.hider.checked){
							mixins.push(ColumnHider);
						}
						if(form.elements.resizer.checked){
							mixins.push(ColumnResizer);
						}
						mixins.push(CompoundColumns);
						
						if(hasCombinedColumnSets){
							mixins.push(ColumnSet);
							args.columnSets = getColumnSets(4);
						}else{
							args.columns = getColumns();
						}
						
						if(gridCombined){
							gridCombined.destroy();
						}
						gridCombined = window.gridCombined = new (declare(mixins))(args);
						document.body.insertBefore(gridCombined.domNode, form);
						gridCombined.startup();
						
						if(event){
							// If called via form submission, keep the browser
							// scrolled to the form at the bottom
							// (otherwise it will jump up due to the grid
							// being destroyed and replaced)
							form.scrollIntoView();
						}
					}
					on(form, "submit", createCombinedGrid);
					createCombinedGrid();
					
					on(byId("btnChcrResetColumns"), "click", function(){
						if(hasCombinedColumnSets){
							gridCombined.set("columnSets", getColumnSets(4));
						}else{
							gridCombined.set("columns", getColumns());
						}
					});
					on(byId("btnChcrHideColumns"), "click", function(){
						if(hasCombinedColumnSets){
							gridCombined.set("columnSets", getHiddenColumnSets());
						}else{
							gridCombined.set("columns", getHiddenColumns());
						}
					});
				});
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid with compound columns</h2>
		<div id="grid"></div>

		<h2>A grid with column sets and compound columns</h2>
		<div id="gridcscc"></div>
		<p>Buttons to test resetting columnSets:
			<button id="btnCsccColumnSets1">set 1</button>
			<button id="btnCsccColumnSets2">set 2</button>
			<button id="btnCsccColumnSets3">set 3</button>
			<button id="btnCsccColumnSets4">set 4</button>
		</p>
		
		<h2>A grid with compound columns + column hiding, column resizing, and/or column sets</h2>
		<form id="formCombined">
			<label><input type="checkbox" name="set" checked> ColumnSet</label>
			<label><input type="checkbox" name="hider" checked> ColumnHider</label>
			<label><input type="checkbox" name="resizer" checked> ColumnResizer</label>
			<button type="submit">Re-create grid</button>
			<button type="button" id="btnChcrResetColumns">Reset columns</button>
			<button type="button" id="btnChcrHideColumns">Set hidden columns</button>
		</form>
	</body>
</html>
